$(function(){
  // get elem
  let $url = $('input[type="text"]'),
      $btnSave = $('input[type="button"]'),
      $img = $('img'),
      $tmpImg = $('<img>');

  // load local storage image
  loadImage();

  $btnSave.click(()=>{
    // load tmp image
    $tmpImg.attr('crossOrigin','anonymous');

    // validate url: not empty, pattern
    $tmpImg.attr('src',$url.val());
  });

  $tmpImg.load(function(){
    let can = $('<canvas>').get(0);
    let ctx = can.getContext('2d');

    ctx.width = this.width;
    ctx.height = this.height;

    // fill tmp image canvas
    ctx.drawImage(this,0,0,can.width,can.height);
  
    // canvas output base64
    // save base64 local storage
    window.localStorage.setItem('img',can.toDataURL());
  });
  function loadImage(){
    let strImg = window.localStorage.getItem('img');
    if(strImg) {
      $img.attr('src',strImg);
      $img.css({display:'block'})
    } else{
      $img.css({display:'none'})
    }
  }


  
});


